import React, { useEffect, useState } from "react";
import "./style.css";
import { Card, Select, Input, Button, Table, message } from "antd";
import { getOrderList } from "../../../store/order";
import { OrderType, ColumsType, StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";
import { apiOrderDel } from "../../../api";

const { Option } = Select;

const Order = () => {
  // 所有数据
  const orderData = useSelector(
    (state: StoreStateType) => state.PublicReducer.orderList
  );

  //删除
  const handleDelete = (id: number) => {
    apiOrderDel({ id }).then((res: any) => {
      if (res.code === 200) {
        message.success(res.mess);
        getOrderList();
      }
    });
  };

  const orderColumns: ColumsType[] = [
    {
      title: "序号",
      width: 150,
      fixed: "left",
      render: (text: any, record: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "编号",
      dataIndex: "serial",
      width: 200,
      key: "serial",
    },
    {
      title: "用户名",
      dataIndex: "username",
      width: 200,
      key: "username",
    },
    {
      title: "手机号",
      dataIndex: "tel",
      width: 200,
    },
    {
      title: "类型",
      dataIndex: "type",
      width: 300,
      // render: (v: OrderType) => {
      //   return <div>{v ? <span>二手房出租</span> : <span>有房出租</span>}</div>;
      // },
    },
    {
      title: "支付金额",
      dataIndex: "price",
      width: 200,
      key: "price",
    },
    {
      title: "支付时间",
      dataIndex: "created_at",
      width: 200,
      key: "created_at",
    },
    {
      title: "操作",
      fixed: "right",
      width: 350,
      render: (v: OrderType) => {
        return (
          <div style={{ display: "flex" }}>
            <Button type="link" onClick={() => handleDelete(v.id)}>
              删除
            </Button>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    // 获取列表数据
    getOrderList();
  }, []);

  const [value, setValue] = useState("");
  
  const changeType = (value: string) => {
    setType(value);
  };
  const [type, setType] = useState("");
  // 搜索
  const searchTable = () => {
    getOrderList({
      value,
      type,
    });
  };

  return (
    <div className="orderbox">
      <Card style={{ width: 1670 }}>
        <div className="ordersanji">
          <div>
            <span>订单类型：</span>
            <Select value={type} style={{ width: 180 }} onChange={changeType}>
              <Option value="二手房">二手房</Option>
              <Option value="房屋出租">房屋出租</Option>
              <Option value="我想买个房">我想买个房</Option>
              <Option value="我想租个房">我想租个房</Option>
            </Select>
          </div>

          <div className="orderinp">
            <span>搜索</span>
            <Input
              placeholder="请输入用户名/手机号/订单号"
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value)}
            ></Input>
          </div>


          <div className="orderss">
            <Button type="primary" style={{ width: 200 }} onClick={searchTable}>
              查询
            </Button>
          </div>
        </div>
      </Card>

      <Card style={{ width: 1670 }} className="orderbody">
        <Table
          columns={orderColumns}
          dataSource={orderData}
          className="ordertab"
        />
      </Card>
    </div>
  );
};
export default Order;
